<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
                <el-form-item label="物品名称">
                    <el-input v-model="formInline.recename" placeholder="物品名称"></el-input>
                </el-form-item>
                <el-form-item label="领用详情">
                    <el-input v-model="formInline.details" placeholder="领用详情"></el-input>
                </el-form-item>
                <el-form-item label="审批状态">
                    <el-select class="ipt-width-150" v-model="formInline.status" placeholder="选择状态">
                        <el-option label="--请选择--" value="0"></el-option>
                        <el-option
                                v-for="(item,index) in sector"
                                :label="item"
                                :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="select()">查询</el-button>
                    <el-button type="primary" @click="cleanall()">清空</el-button>
                    <el-button type="primary" @click="motalVisible = true">新建+</el-button>
                </el-form-item>
            </el-form>
            <!--新建申请单的模态框-->
            <el-dialog title="物品申请单" :visible.sync="motalVisible">
                <el-form :model="form">
                    <el-form-item label="物品名称:" :label-width="formLabelWidth">
                        <el-input v-model="form.recename" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-input v-model="form.quantity" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="详情:" :label-width="formLabelWidth">
                        <el-input v-model="form.details" autocomplete="off" ></el-input>
                    </el-form-item>
                    <el-form-item label="物品用途:" :label-width="formLabelWidth">
                        <el-input v-model="form.useofgoods" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="motalVisible = false">取 消</el-button>
                    <el-button type="primary" @click="motalVisible = false,subData()">确 定</el-button>
                </div>
            </el-dialog>
        </el-header>
        <el-main>
            <el-table
                    class="user-list"
                    :cell-style="cellStyle"
                    :data="thingsData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :header-cell-style="rowClass"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="recename"
                        label="物品名称"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="quantity"
                        label="数量"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="details"
                        label="详情"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="useofgoods"
                        label="物品用途"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="审批状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click="look(scope.row)"
                                type="text"
                                size="small">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    class="user-list-page"
                    :total="thingsData.length">
            </el-pagination>

            <!--查看详情模态框-->
            <el-dialog title="印章申请详情" :visible.sync="dialogFormVisible">
                <el-form :model="formDetail">
                    <el-form-item label="物品名称:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.recename" autocomplete="off" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="数量:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.quantity" autocomplete="off"  readonly></el-input>
                    </el-form-item>
                    <el-form-item label="详情:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.details" autocomplete="off"  readonly></el-input>
                    </el-form-item>
                    <el-form-item label="物品用途:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.useofgoods" autocomplete="off" readonly ></el-input>
                    </el-form-item>
                    <el-form-item label="审批状态:" :label-width="formLabelWidth">
                        <el-input v-model="formDetail.status" autocomplete="off"  readonly></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "things",
        data(){
            return{
                formInline:{
                    recename:'',
                    details:'',
                    status:'不限'
                },
                sector: {state1:"审批中",state2:"审批通过",state3:"审批未通过",},
                thingsData:[],
                value1: '',
                form:{
                    recename:'',
                    quantity:'',
                    details:'',
                    useofgoods:''
                },
                formDetail:{
                    recename:'',
                    quantity:'',
                    details:'',
                    useofgoods:'',
                    status:''
                },
                motalVisible:false,
                formLabelWidth:'120px',
                dialogFormVisible:false,
                //新增模态框确定后删除
                clearDiaLogInner(){
                    this.form.recename !== "" &&
                    this.form.quantity !== "" &&
                    this.form.details !== "" &&
                    this.form.useofgoods !== ""
                },
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                size:5,
            }
        },
        methods: {
            //查询按钮绑定方法
            select(){
                let that = this
                // console.log(this.formInline)
                let data = {empid:9}
                let url = "/api/selectReceiving";
                that
                    .$axios({
                        method: "post",
                        url: url,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                        data: JSON.stringify(data),
                    })
                    .then((res)=>{
                        let arr = res.data.data;
                        if(that.formInline.recename){
                            arr = arr.filter(function (val,index) {
                                return val.recename == that.formInline.recename
                            });
                        }
                        if(that.formInline.details){
                            arr = arr.filter(function (val,index) {
                                return val.details == that.formInline.details
                            });
                        }
                        if (
                            that.formInline.status != "不限" &&
                            that.formInline.status != "请选择"
                        ) {
                            arr = arr.filter(function (val, index) {
                                let state = 0
                                if (that.formInline.status == "审批中") {
                                    state = 1
                                }
                                if (that.formInline.status == "审批通过") {
                                    state = 2
                                }
                                if (that.formInline.status == "审批未通过") {
                                    state = 3
                                }
                                return val.state == state

                            });
                        }
                        arr = arr.filter(function (val,index) {
                            if(val.state == 1){
                                val.state = '审批中'
                            }
                            if(val.state == 2){
                                val.state = '审批通过'
                            }
                            if(val.state == 3){
                                val.state = '审批未通过'
                            }
                            return true
                        })
                        this.thingsData = arr
                        that.total = that.thingsData.length;
                    })
            },
            cleanall() {
                this.formInline.recename = "";
                this.formInline.details = "";
                this.formInline.status = "不限";
                this.select()
            },
            //查看模态框
            look(e) {
                this.dialogFormVisible = true
                this.formDetail = e
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },
            //表格数据居中显示
            cellStyle({row, column, rowIndex, columnIndex}) {
                return "text-align:center"
            },
            rowClass({row, rowIndex}) {
                return "text-align:center"
            },
            //清空新建输入框
            empty(){
                this.form.recename = "";
                this.form.quantity = "";
                this.form.details = "";
                this.form.useofgoods = "";
            },
            //从后端中获取数据
            info() {
                let that = this;
                let receiveUrl = "/api/selectReceiving";
                let params = {
                    "empid": 9,
                    "id": 0,
                    "password": "string"
                }
                //获取物品领用单的数据
                that
                    .$axios({
                        method: "post",
                        url: receiveUrl,
                        headers: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                        data: JSON.stringify(params),
                    })
                    .then((res) => {
                        let goodsObj = res.data.data
                        console.log(goodsObj)
                        goodsObj.forEach((value, index, arr) => {
                            let nowValueState = value.state;
                            let tempState = "";
                            if (nowValueState == 1) {
                            tempState = "审批中";
                        } else if (nowValueState == 2) {
                            tempState = "审批通过";
                        } else if (nowValueState == 3) {
                            tempState = "审批未通过";
                        }
                        value.state = tempState;
                        })
                        this.thingsData = res.data.data
                    })
                this.clearDiaLogInner()
            },
            subData() {
                if (
                    this.form.recename !== "" &&
                    this.form.quantity !== "" &&
                    this.form.details !== "" &&
                    this.form.useofgoods !== ""
                ) {
                    //axios添加物品领用申请
                    let that = this;
                    let url = "/api/insertReceiving";
                    console.log(this.form);
                    let params = {
                        empid: 9,
                        recename: this.form.recename,
                        quantity: this.form.quantity,
                        details: this.form.details,
                        useofgoods: this.form.useofgoods,
                    };
                    console.log(params);
                    that
                        .$axios({
                            method: "post",
                            url: url,
                            headers: {
                                "Content-Type": "application/json;charset=utf-8",
                            },
                            data: JSON.stringify(params),
                        })
                        .then((res) => {
                            console.log(res);
                            console.log("res");
                            that.info();
                        });
                } else {
                    alert("表中有未填项，请继续填写");
                }
                this.empty()
            },
        },
        created() {
            this.total = this.thingsData.length
            this.info();
            // this.getLeader();
        },
        computed:{

        }
    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>